<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入关键字')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table
                ref="mainTable"
                :columns="lr_getPageColumns(columns)"
                :dataSource="tableShowData" 
                :loading="loading"
                row-key="f_CompanyId"
                default-expand-all
                 >
                <template v-slot:f_FoundedTime="scope" >
                    {{lr_dateFormat(scope.row.f_FoundedTime,'yyyy-MM-dd')}}
                </template>
                <template v-slot:f_Nature="scope" >
                    {{lr_dataItemName(lr_dataItem['CompanyNature'],scope.row.f_Nature)}}
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :height="480"
            :title="formTitle"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" ></my-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.organization.company

import MyForm from './form'
export default {
    components: {
        MyForm
    },
    data () {
        return {
            lr_isPage:true,
            //查询
            searchWord:'',
            searchTableData:null,

            loading:false,
            columns: [
                {label:'名称',prop:'f_FullName',minWidth:'260'},
                {label:'编码',prop:'f_EnCode',width:'150'},
                {label:'简称',prop:'f_ShortName',width:'150'}, 
            ],
            tableBtns:[
                {prop:'Edit',label:'设置',width:60},
            ],
            tableData:[],
            

            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false
        }
    },
    mounted () {
        this.lr_loadDataItem('CompanyNature')
        this.loadTable()
    },
    computed:{
        tableShowData(){
            if(this.searchTableData){
                return  this.$toTree(this.searchTableData,"f_CompanyId","f_ParentId","f_CompanyId","f_FullName")
            }
            else{
                return  this.lr_companyTree
            }
        }
    },
    methods:{
        async loadTable(){
            this.loading = true
            this.searchWord = ''
            this.searchTableData = null
            await this.lr_loadCompanys(false)
            this.loading = false
        },

        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.lr_companyList.filter(item => item.f_FullName.indexOf(this.searchWord) >-1 || item.f_EnCode.indexOf(this.searchWord)>-1)
            }
            else{
                this.searchTableData = null
            }
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑配置')
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading()
                const formData = this.$refs.form.getForm()
                if(this.formEdit){// 修改数据
                    api.update(formData.f_CompanyId,formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: this.$t('更新成功!')
                        })
                        this.loadTable()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(formData).then(()=> {
                        hideLoading()
                        this.formVisible = false;
                        this.$message({
                            type: 'success',
                            message: this.$t('添加成功!')
                        });
                        this.loadTable()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            });
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow)
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }

}
</script>
